import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TouchableNativeFeedback,
} from 'react-native';
import { Icon } from 'react-native-elements';
import PropTypes from 'prop-types';

class FullTabViewTabBar extends React.Component {
  render() {
    const {
      tabs,
      tabbarStyle,
      tabStyle,
      iconSize,
      activeColor,
      inActiveColor,
    } = this.props;
    return (
      <View style={[styles.tabs, tabbarStyle]}>
        {tabs.map((tab, i) => {
          // use delete/material pattern to pass icon info
          const iconInfo = tab.split('/');
          return (
            <TouchableNativeFeedback
              key={tab}
              onPress={() => this.props.goToPage(i)}
              background={TouchableNativeFeedback.Ripple('#fff', true)}>
              <View style={[styles.tab, tabStyle]}>
                <Icon
                  name={iconInfo[0]}
                  type={iconInfo[1] || 'material'}
                  size={iconSize}
                  color={this.props.activeTab === i ? activeColor : inActiveColor}
                />
              </View>
            </TouchableNativeFeedback>
          );
        })}
      </View>
    );
  }
}

FullTabViewTabBar.propTypes = {
  goToPage: PropTypes.func,
  activeTab: PropTypes.number,
  tabs: PropTypes.array,
  tabbarStyle: PropTypes.any,
  tabStyle: PropTypes.any,
  iconSize: PropTypes.number,
  activeColor: PropTypes.string,
  inActiveColor: PropTypes.string,
};
FullTabViewTabBar.defaultProps = {
  goToPage: () => {},
  activeTab: 0,
  tabs: [],
  tabbarStyle: {},
  tabStyle: {},
  iconSize: 25,
  activeColor: '#ddd',
  inActiveColor: '#444',
};
const styles = StyleSheet.create({
  tab: {
    width: 45,
    height: 45,
    justifyContent: 'center',
    alignItems: 'center',
  },
  tabs: {
    width: 150,
    height: 56,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default FullTabViewTabBar;
